<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <!-- 引入ElementUI样式 -->
    <link type="text/css" rel="stylesheet" href="./css/index.css">
    <!-- 引入Vue组件库 -->
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <div id="main" style="width: 80%;height:600px; margin: 20px auto"></div>

    <div id="main1" style="width: 80%;height:400px; margin: 20px auto"></div>
</div>

</div>


<script>
    new Vue({
        el: "#app",
        data() {
            return{
                name:[],
                series:[],
                date:[],
                price:[],
            };
        },

        created() {
            //先获取数据赋值给data中相关的参数，再对echarts进行设置
            axios.get("/statistical/priceInfo").then(resp=>{
                this.name=resp.data.data.name;
                this.series=resp.data.data.series;
                this.price=resp.data.data.price;
                this.date=resp.data.data.date;
                this.initEcharst();
                this.initEcharst2();
            });

        },
        methods: {
            initEcharst(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                myChart.setOption({
                    title: {
                        text: '各科室的收入',
                        textStyle: {
                            color: '#235894'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: this.name
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.date,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: this.series,
                });
            },

            initEcharst2(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main1'));

                myChart.setOption({
                    title: {
                        text: '各科室的总收入',
                        textStyle: {
                            color: '#235894'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: this.date,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: this.price,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                });
            },
        },
    })
</script>

</body>
</html>